import * as React from 'react';
import {observer} from 'mobx-react';
import {Table, Row, Col, Button, message} from 'antd';
import {InputItem} from '../../../../component/input/Input';
import {BuBaseFormModal, UserBaseForm, PassWordInput} from '../form/Form';
import {UserBaseFormStore, addStore, listStore, searchStore} from '../UserStore';

@observer
export class AddFormModal extends React.Component<any, any> {
    onOk(me){
        return async function(e){
           if(await addStore.isAsyncValid()){
                addStore.changeConfirmLoading(true);

                addStore.addBu(addStore.getValues())
                    .then((data)=>{
                        if(data.success){
                            message.success(data.message,3);
                            addStore.hide();
                            listStore.refresh(searchStore);
                        }else{
                            message.error(data.message,3);
                        }

                        addStore.changeConfirmLoading(false);
                    })
           }else{
               return false;
           }
        }
    }

    render() {
        return (
            <BuBaseFormModal store={addStore} title="新增" onOk={this.onOk(this)}>
                <AddForm store={addStore}/>
            </BuBaseFormModal>
        )
    }
}

@observer
class AddForm extends React.Component<{store: UserBaseFormStore},any>{
    onChangePId = (value)=>{
        const store: UserBaseFormStore = this.props.store;
        store.valid('password',value,!store.fields.password.required);
        store.valid('resPassword',store.fields.resPassword.value,!store.fields.resPassword.required)
    }

    onChangeResPId = (value)=>{
        const store: UserBaseFormStore = this.props.store;
        store.valid('resPassword',value,!store.fields.resPassword.required);
        store.valid('password',store.fields.password.value,!store.fields.password.required)
    }

    render(){
        const store = this.props.store;

        const colStyle = {
            labelCol: { span: 6},
            wrapperCol: {span: 18}
        }

        return (
            <div>
                <Row type="flex">
                    <Col span={12}>
                        <InputItem store={store} 
                            myKey="username" 
                            title="用户名:" 
                            labelCol= {colStyle.labelCol} 
                            wrapperCol= {colStyle.wrapperCol}
                            anscy= {true}/>
                    </Col>
                    <Col span={12}>
                        <InputItem store={store} 
                            myKey="realname" 
                            title="姓名:" 
                            labelCol= {colStyle.labelCol} 
                            wrapperCol= {colStyle.wrapperCol}/>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={12}>
                        <PassWordInput store={store} 
                            type= "password"
                            myKey="password" 
                            title="密码:" 
                            labelCol= {colStyle.labelCol} 
                            wrapperCol= {colStyle.wrapperCol}
                            onChange = {this.onChangePId}/>
                    </Col>
                    <Col span={12}>
                        <PassWordInput store={store} 
                            type= "password"
                            myKey="resPassword" 
                            title="确认密码:" 
                            labelCol= {colStyle.labelCol} 
                            wrapperCol= {colStyle.wrapperCol}
                            onChange = {this.onChangeResPId}/>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={12}>
                        <InputItem store={store} 
                            myKey="mobile" 
                            title="手机号码:" 
                            labelCol= {colStyle.labelCol} 
                            wrapperCol= {colStyle.wrapperCol}/>
                    </Col>
                </Row>
                <UserBaseForm store = {this.props.store}/>
            </div>
        );
    }
}
